import React from 'react';
import {connect} from 'dva';
import styles from './index.less';
import { Picker, InputItem, Checkbox, List } from 'antd-mobile';
const CheckboxItem = Checkbox.CheckboxItem;
/**
 * 出差目的
 */
class cPurposeOfTripAndRemark extends React.Component {
  constructor(props) {
    super(props);

    this.state = {

    }
  }

  handleListLabel = (list) => {
    return global._.map(list, item => {
      return {
        label: item,
        value: item
      }
    });
  }

  handleSiteCheckboxChange = (value, key) => {
    value += '';
    const values = this.props.detail.mast[key];
    let arr = [];
    if(values.indexOf(value) !== -1){
      arr = global._.filter(values, (item) => {
        return item !== value;
      })
    }else{
      arr = values.concat([value]);
    }
    arr = global._.uniq(arr);
    console.log(arr);
    this.onChange(arr, key);
  }

  onChange = (value, key) => {
    this.props.dispatch({type: 'detail/changeMast', payload: {
      [key]: value
    }});
  }

  render(){
    return (
      <div className={styles.baseList}>
        <Picker data={this.handleListLabel(this.props.detail.allTravelTypes)} cols={1} onChange={(values) => this.onChange(values[0], 'type')}>
          <div className={styles.item}>
            <div className={styles.des}>Type</div>
            <div className={styles.value}>{this.props.detail.mast.type || 'Select'}</div>
          </div>
        </Picker>
        {
          this.props.detail.mast.type == 'Site Office Visit'
          ?
            <div className={`${styles.item} ${styles.blockItem}`}>
              <div className={styles.des}>Visit Site</div>
              <div className={styles.value}>
                <div className={styles.checkList}>
                  <List>
                  {this.props.detail.mobileAllSiteOffices.map(i => {
                    return (
                      <CheckboxItem key={i.id} checked={this.props.detail.mast.subCompanys.indexOf(i.id + '') != -1} onChange={() => this.handleSiteCheckboxChange(i.id, 'subCompanys')}>
                        {i.siteLocation}
                      </CheckboxItem>
                    )
                  }
                )}
                  </List>
                </div>
              </div>
            </div>
          :
          null
        }
        <div className={styles.item}>
          <div className={styles.des}>Purpose of trip</div>
          <div className={styles.value}>
            <InputItem
              clear
              disabled={!this.props.edit}
              placeholder="click input"
              value={this.props.detail.mast.purpose}
              onChange={(value) => this.onChange(value, 'purpose')}
            ></InputItem>
          </div>
        </div>
        {/*
          <div className={styles.item}>
          <div className={styles.des}>Note</div>
          <div className={styles.value}>
          <InputItem
          clear
          placeholder="click input"
          value={this.props.detail.mast.requestorRemarks}
          onChange={(value) => this.onChange(value, 'requestorRemarks')}
          ></InputItem>
          </div>
          </div>
          */}
      </div>
    )
  }
}


function mapStateToProps(state) {
  return {
    ...state.detail
  }
}
export default connect(mapStateToProps)(cPurposeOfTripAndRemark);
